<template>
	<a-drawer title="过度效果" :width="430" :visible="visible" :footer-style="{ textAlign: 'right' }" @close="onClose">
		<div class="title">当前选中{{activeKey=='in'?'淡入':'淡出'}}效果：{{`${currentKey[activeKey]?matchData.transitions[currentKey[activeKey]]:'暂无'}`}} 
			<a-button v-if="currentKey[activeKey]" @click="currentKey[activeKey] = ''" type='link'>清除</a-button>
		</div>
		<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
		    <a-tab-pane key="in" tab="淡入"></a-tab-pane>
		    <a-tab-pane key="out" tab="淡出"></a-tab-pane>
		</a-tabs>
		<div class="transition_con">
			<div class="transition_item" v-for="(item, index) in transitionObj[activeKey]" :key="index">
				<div class="transition_name">{{item.name}}</div>
				<div class="material_con">
					<div class="material_item"
						@click.stop="chooseThis(material_item)"
						v-for="(material_item, material_index) in item.materials" :key="material_index">
						<div class="material_image"
							:class="currentKey[activeKey] == material_item.scene_type?'active':''">
							<video :id="activeKey+'_'+index+'_'+material_index" @ended="handleEnded" @mouseout="(value)=>handleMouseOut(value)"
							@mouseenter="(value)=>handleMouseIn(value)" :src="material_item.material_url" alt="" />
						</div>
						<div class="material_name">{{material_item.material_name}}{{material_item.show}}</div>
					</div>
				</div>
			</div>
		</div>
		<template #footer>
			<a-space>
				<a-button @click="onClose">取消</a-button>
				<a-button type="primary" @click="handleSubmit">提交</a-button>
			</a-space>
		</template>
	</a-drawer>
</template>

<script>
	import request from "../../../../../../common/utils/request";
	import matchData from '../js/match_data.js';
	import {
		defineComponent,
		reactive,
		ref,
		toRefs,
		watch,
		nextTick
	} from 'vue';
	import {
		message
	} from 'ant-design-vue';
	let videoPlayer = null
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			transitionKey: {
				type: Object,
				default: ()=>{return {}}
			}
		},

		emits: ['close'],

		setup(props, context) {
			const state = reactive({
				activeKey: 'in',
				currentKey: {in:'', out:''},
				transitionObj: {in:[], out:[]}
			})

			const onClose = () => {
				context.emit('close', 'close')
			};

			const handleSubmit = () => {
				context.emit('close', state.currentKey)
			}

			const getTransitionList = () => {
				request.get('/work_ai', '/user/shotstack/material/transtions/list').then(res => {
					state.transitionObj['in'] = res.result.transitions_in
					state.transitionObj['out'] = res.result.transitions_out
					initVideoTime()
				})
			}

			const chooseThis = (item) => {
				state.currentKey[state.activeKey] = item.scene_type
			}

			const handleMouseIn = (e) => {
				e.target.currentTime = 0
				e.target.play()
			}
			
			const handleEnded = (e) => {
				if(state.activeKey == 'out'){
					e.target.currentTime = 0
				}
			}
			
			const handleMouseOut = (e) => {
				if(state.activeKey == 'in'){
					e.target.currentTime = 2000
				} else {
					e.target.currentTime = 0
				}
				e.target.pause()
			}
			
			const handleTabChange = (key) => {
				if(key == 'in'){
					initVideoTime()
				}
			}
			
			
			const initVideoTime = () => {
				state.transitionObj['in'].map((item, index)=>{
					item.materials.map((material_item, material_index)=>{
						nextTick(()=>{
							let dom = document.getElementById(state.activeKey+'_'+index+'_'+material_index)
							dom.currentTime = 2000
						})
					})
				})
			}
			
			watch(() => props.visible, val => {
				if (val) {
					state.activeKey = 'in'
					getTransitionList()
				}
				if (val && props.transitionKey) {
					state.currentKey = props.transitionKey
				} else if(val && !props.transitionKey){
					state.currentKey = {in: '', out: ''}
				}
			})

			return {
				...toRefs(state),
				onClose,
				chooseThis,
				handleSubmit,
				handleMouseIn,
				handleEnded,
				matchData,
				handleMouseOut,
				handleTabChange
			};
		},
	});
</script>

<style lang="less" scoped>
	.title{
		height: 30px;
		color: #333;
		display: flex;
		align-items: center;
		font-weight: bold;
		font-size: 14px;
	}
	.transition_con {
		width: 100%;

		.transition_item {
			margin-top: 10px;

			.transition_name {
				color: #333;
				font-weight: bold;
				font-size: 14px;
			}

			.material_con {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 10px;

				.material_item {
					margin-top: 5px;
					cursor: pointer;
					width: 32%;
					.material_image {
						width: 100%;
						height: 70px;
						border-radius: 5px;
						border: 2px solid transparent;
						position: relative;
						&.active {
							border: 2px solid #40dde7;
						}
						video {
							width: 100%;
							height: 100%;
							border-radius: 5px;
							overflow: hidden;
							filter: grayscale(.1)
						}
					}

					.material_name {
						color: #666;
						margin-top: 5px;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>